<template>
    <div class="composite" v-if="Img">
        <div class="container">
             <div class="toplogo" ref="toplogo">
                <button class="comebreak" @click="$router.go(-1)">
                    <div class="left iconfont icon-arrow-left-bold"></div>
                </button>
                <p style="font-weight:bold;font-size:16px;">综合</p>
                <div class="left iconfont icon-elipsis" @click="comment1">
  
                </div>
            </div>
            
             <div class="banner" >
               <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                  <van-swipe-item v-for="(item,index) in Img" :key="index">
                    <div class="bannerbox">
                      <div class="imgbox">
                        <img class="auto-img" :src="item.img" alt="">
                      </div>
                      <p>{{item.title}}</p>
                    </div>
                    
                  </van-swipe-item>
                  
                </van-swipe>
             </div>  
            <van-tabs v-model="active"  scrollspy sticky :offset-top='40'>
                <van-tab v-for="(item,index) in titlebox" :key="index" title-style=font-weight:bold;font-size:14px>
                <div class="linebox"></div>
                    <template #title >{{item}} </template>
                   <div class="lit" style="padding:0 13px;padding-top:8px;font-weight:bold;">{{item}}</div> 
                <lists-page-two></lists-page-two>
                </van-tab>
            </van-tabs>
        </div>
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          :close-on-click-overlay='true'
          
          @select="onSelect"
          />
    </div>
</template>

<script>
import Swiper from "swiper";
import { Toast } from 'vant';
// import listsPage from '@/components/listsPage.vue';
import { getImg } from "../api/lists";
import { getBanner } from "../api/banner";
import ListsPageTwo from '../components/listsPageTwo.vue'
    export default {
  components: {  ListsPageTwo },
        data() {
            return {
                showShare: false,
                options: [
                    [
                    { name: '微信', icon: 'wechat' },
                    { name: '朋友圈', icon: 'wechat-moments' },
                    { name: '微博', icon: 'weibo' },
                    { name: 'QQ', icon: 'qq' },
                    ],
                    [
                    { name: '复制链接', icon: 'link' },
                    { name: '海报', icon: 'poster' },
                    { name: '二维码', icon: 'qrcode' },
                    { name: '小程序码', icon: 'weapp-qrcode' },
                    ],
                ],
                active: 0,
                Img:null,
                Bannerimg:null,
                titlebox:['头条','新闻','实时','生活小妙招','体育','今日要闻','军事科技']
            };
        },
        methods:{
            //分享组件
            onSelect(option) {
                if(option.name=="复制链接"){
                Toast.success(option.name+"成功");        
                }else{
                Toast.success("分享"+option.name+"成功");        
                }
                this.showShare = false;       
            },
            getImgFun(){
                getImg().then(data=>{
                    console.log(data.image);
                    this.Img=data.image;
                })
            },
            getBannerFun(){
                getBanner().then(data=>{
                    this.Bannerimg=data.banner;
                })
            },
            //底部分享按钮
            comment1(){
                let token = window.localStorage.getItem("token");
                if(!token){
                    // this.$router.push("/home");
                    this.$router.push("/login")
                }else{
                    this.showShare=true;
                }
            },
        },
        created(){
            this.getImgFun();
        },
        mounted(){
        new Swiper(".mySwiper", {
            slidesPerView: "auto",
            spaceBetween: 15,
            observer:true,
            observerParents:true,
        });
        
        }
    }
</script>

<style lang="scss" scoped>
.composite{
   
    .toplogo {
    height: 40px;
    z-index: 999;
    padding: 0 13px 0 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: #fff;
    .left {
      width: 7.5%;
      height: 40px;
      line-height: 40px;
      font-size: 28px;
      
    }
    
  }
  .van-tabs ::v-deep .van-tabs__line{
    bottom: 20px;
  }
  .van-share-sheet ::v-deep .van-share-sheet__options{
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
  }
  .banner{
    .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 18px;
    
    .bannerbox{
      margin-top: 5px;
      position: relative;
      padding: 0 13px; 
     
      .imgbox{
        border-radius: 8px;
        overflow: hidden;
        height: 200px;
      }
      p{
        letter-spacing: 2px;
        font-weight: bold;
        position: absolute;
        bottom: 20px;
        left: 30px;
        right: 30px;
      }
    }
    
    

  }
  }
}
</style>